<template>
  <!-- 投放位置 -->
  <div class="audit">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="酒店名称">
        <el-input placeholder="" v-model="hotelName"></el-input>
        <div class="single-step" v-show="isShow">
          <h2>第一步</h2>
          <p>填写酒店名称或者直接搜索半径查找附近酒店,
            直接输入想要搜索自己位置半径范围数字（输入的半径数字1-30公里范围以整数为准）以便于寻找附近的酒店

          </p>
          <div class="guan"><span @click="guan">知道了</span></div>
        </div>
      </el-form-item>
      <el-form-item label="搜索半径" class="banjing">
        <el-input placeholder="" v-model="radius"></el-input>
        <span class="serf">公里</span>
        
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchMap" icon="el-icon-search">搜索</el-button>
        <el-button type="reset" @click="reset">重置</el-button>
        
      </el-form-item>
    </el-form>
    <div class="mapList">
      <el-row :gutter="24">
        <el-col :span="16" class="mapLef">
          <div id="allmap" ref="allmap" style="width:100%;height:100%"></div>
          <div class="selectNum" @click="selectHotel = true">
            <strong>6</strong>
            <p>已选10家</p>
          </div>
          <div class="single-step single-step4" v-show="isShow4">
            <h2>第四步</h2>
            <p>点击附近酒店小图标可以选择要投放的酒店或者从右侧栏进行选择</p>
            <div class="guan" @click="guan4"><span>知道了</span></div>
        </div>
        </el-col>
        <el-col :span="8">
          <div class="title" style="background: url('static/images/tabbg_03.png') no-repeat;background-size: cover;">
            <h4>范围内广告资源信息</h4>
            <p>你所在位置周围酒店数量
              <span>24</span>
            </p>
          </div>
          <el-table ref="singleTable" :data="tableData" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
            <el-table-column  type="index"  width="20">.</el-table-column>
            <el-table-column property="name" label="酒店姓名" align="center"> </el-table-column>
            <el-table-column property="nums" label="房间数" align="center"> </el-table-column>
            <el-table-column property="address" label="距离" align="center"> </el-table-column>
          </el-table>
          <div class="pageCon">
            <el-pagination small  layout="prev, pager, next"  :total="50"></el-pagination>
          </div>
        </el-col>
      </el-row>
        <div class="single-step single-step5 " v-show="isShow5">
            <h2>第五步</h2>
            <p>点击下一步进行广告物料投放</p>
            <div class="guan" @click="guan5"><span>知道了</span></div>
        </div>
    </div>
    <el-dialog :visible.sync="selectHotel" class="hotelItem">
      <h3 class="LayTit">已选酒店</h3>
      <el-table ref="singleTable" :data="tableData" class="orderTable" highlight-current-row @current-change="handleCurrentChange" style="width: 100%">
        <el-table-column  type="index"  width="20"></el-table-column>
        <el-table-column property="name" label="酒店名称" style="width:40%"></el-table-column>
        <el-table-column property="nums" label="房间数" align="center" style="width:25%"></el-table-column>
        <el-table-column property="address" label="距离" align="center" style="width:25%"></el-table-column>
        <el-table-column property="option" label="" align="center" style="width:10%">
          <template slot-scope="scope">
            <i class="el-icon-delete"></i>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <div id="menceng">
      <span class="closeS" @click="closeS"><img src="static/images/close.png" alt=""></span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      selectHotel: false,
      hotelName: "酒店",
      radius: 1000,
      isShow:true,
      isShow4:true,
      isShow5:true,
      tableData: [
        {
          nums: "45",
          name: "希尔顿酒店",
          address: "12公里"
        },
        {
          nums: "36",
          name: "北京新天地国际酒店",
          address: "344公里"
        },
        {
          nums: "58",
          name: "希尔顿酒店",
          address: "66公里"
        },
        {
          nums: "256",
          name: "希尔顿酒店",
          address: "77公里"
        },
        {
          nums: "256",
          name: "希尔顿酒店",
          address: "77公里"
        },
        {
          nums: "256",
          name: "希尔顿酒店",
          address: "77公里"
        },
        {
          nums: "256",
          name: "希尔顿酒店",
          address: "77公里"
        }
      ],
      chooseHotel: []
    }
  },
  methods: {
    reset() {
      this.hotelName='';
      this.radius = 0;
      this.map();
    },
    map() {
      var self = this
      // 创建Map实例
      var map = new BMap.Map(this.$refs.allmap)
      // 初始化地图,设置中心点坐标和地图级别
      var mPoint = new BMap.Point(116.404, 39.915)
      map.centerAndZoom(mPoint, 15)
      //开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      //我的位置
      var pt = new BMap.Point(116.404, 39.915)
      var myIcon = new BMap.Icon(
        "/static/images/Dot.png",
        new BMap.Size(83, 88)
      )
      var marker2 = new BMap.Marker(pt, { icon: myIcon }) // 创建标注
      map.addOverlay(marker2)

      //画圆
      var circle = new BMap.Circle(mPoint, this.radius, {
        fillColor: "#fbad59",
        strokeWeight: 1,
        fillOpacity: 0.3,
        strokeOpacity: 0.1
      })
      map.addOverlay(circle)

      var data_info = [
        [
          116.417854,
          39.921988,
          "地址：北京市东城区王府井大街88号乐天银泰百货八层"
        ],
        [116.406605, 39.921585, "地址：北京市东城区东华门大街"],
        [116.412222, 39.912345, "地址：北京市东城区正义路甲5号"]
      ]

      var myIcon1 = new BMap.Icon(
        "/static/images/Dot1.png",
        new BMap.Size(31, 54)
      )
      for (var i = 0; i < data_info.length; i++) {
        var marker = new BMap.Marker(
          new BMap.Point(data_info[i][0], data_info[i][1]),
          { icon: myIcon1 }
        ) // 创建标注
        var content = data_info[i][2]
        map.addOverlay(marker) // 将标注添加到地图中
        addClickHandler(self, content, marker)
      }
      function addClickHandler(self, content, marker) {
        marker.addEventListener("click", function(e) {
          openInfo(content, e)
          self.chooseHotel.push({ 酒店名称: content, 房间数: 32, 距离: 32 })
        })
      }
      function openInfo(content, e) {
        var p = e.target
        var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat)
        var sContent =
          "<div style='background-color:#ff8b00; color:#FFFFFF; padding:10px;'><h4 style=' font-size:14px; margin:0 0 5px;'>天安门</h4>" +
          "<p style='font-size:12px;'>天安门坐落在中国北京市中心,故宫的南侧,与天安门广场隔长安街相望,是清朝皇城的大门...</p>" +
          "</div></div>"
        var infoWindow = new BMap.InfoWindow(sContent) // 创建信息窗口对象
        map.openInfoWindow(infoWindow, point) //开启信息窗口
      }
    },
    searchMap() {
      this.map()
    },
    guan(){
      // document.getElementById("menceng").style.display='none';
      this.isShow = false;
    },
    guan4(){
      this.isShow4 = false;
    },
    guan5(){
        this.isShow = false;
       this.isShow4 = false;
       this.isShow5 = false;
       document.getElementById("menceng").style.display='none';
    },
    closeS(){
       document.getElementById("menceng").style.display='none';
       this.isShow = false;
       this.isShow4 = false;
       this.isShow5 = false;
    }
  },
  mounted() {
    this.map()
  },
  updated(){

  }
}
</script>

<style>
#menceng{
  position: fixed;
  width: 100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.7);
  z-index: 9999;
  top: 0;
  left: 0;
}
.serf{
  position: absolute;
    top: 0;
    right: 10px;  
    color: #c0c4cc;
}
.closeS{
  position: absolute;
  right: 10%;
  top: 10%;
}
.closeS:hover{
  opacity: .9;
}
.myDeploy .pageOll .page1 .mapList{ position: relative;}
.myDeploy .pageOll .page1 .mapList  .el-col.el-col-8 .title h4{
  margin: 0;
}
.myDeploy .pageOll .page1 .mapList  .el-col.el-col-8 .title p{
  margin: 5px 0;
}
.myDeploy .pageOll .page1  .mapList .el-col.el-col-8 .title{
  padding: 20px 20px 10px;
}
.myDeploy .pageOll .page1  .mapList .el-table--enable-row-transition .el-table__body td{
  	color: #9e9e9e;
}
.mapList .el-table__header thead tr th{
  background: #fef6f0;
  color: #657180;
}
.audit .single-step{
    position: absolute;
    z-index: 10000;
    width: calc(100% + 68px);
    left: -68px;
    top: 55px;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px 10px 5px;
}
.audit .single-step3{
  left: 0;
}
.audit .single-step4{
    width: 275px;
    top: 59%;
    left: auto;
    right: 10%;
}
.audit .single-step5{
    width: 275px;
    top: 100%;
    left: 50%;
    /*right: calc(50% - 130px);
    bottom: 0;*/
    margin-left: 80px;
    margin-top: 10px;
}
.audit .single-step h2{
      font-size:16px;
      margin: 0;
      line-height: 24px;
}
.audit .single-step p{
  margin: 6px 0;
  color: #aaaaaa;
  line-height: 1.5em;
}
.audit .single-step::before{
    content: '';
    position: absolute;
    height: 0;
    width: 0;
     border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid #fff;
    top: -10px;
}
.audit .single-step5:before{ top: 15px; left: -20px; border-right: 20px solid #fff; border-bottom: 10px solid transparent; border-top: 10px solid transparent;}
.audit .single-step span{
  border:1px solid #ff8b00;
  color: #ff8b00;
  padding: 4px 14px 3px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
}
.audit .guan{
  text-align: right;
  line-height: 40px;
}
.mapList .el-table--enable-row-transition .el-table__body td:nth-child(2){
  text-align: left
}
.mapLef {
  position: relative;
}
.selectNum {
  position: absolute;
  left: 0;
  top: 0;
  width: 99px;
  height: 99px;
  font-size: 14px;
  text-align: center;
  padding-right: 15px;
  padding-top: 10px;
  background: url("/static/images/selectNumBg.png") left top no-repeat;
  color: #ffffff;
  cursor: pointer;
}
.selectNum strong {
  font-family: Arial;
  font-size: 28px;
}
.selectNum p {
  margin: 0;
}
.mapList .el-table thead tr th:first-child .cell{
  display: none;
}
.hotelItem .el-dialog {
  width: 90%;
  max-width: 680px;
}
.hotelItem .el-dialog__header {
  padding: 0;
}
.hotelItem .el-row {
  display: block !important;
  text-align: center;
  padding: 25px 0 0;
}
.hotelItem .el-button {
  min-width: 120px;
}
.hotelItem .orderTable.el-table td {
  padding: 10px 0;
}
.hotelItem .el-dialog__headerbtn {
  right: 0;
  top: 0;
  width: 42px;
  height: 42px;
  background: url("/static/images/hotelClose.png") right top no-repeat;
  color: #ffffff;
  padding: 0 0 5px 5px;
}
.hotelItem .el-dialog__headerbtn .el-dialog__close {
  color: #ffffff;
}
.hotelItem .orderTable {
  border: none;
  font-size: 14px;
  color: #9e9e9e;
}
.hotelItem .orderTable th {
  color: #657180;
}
.el-icon-delete:hover {
  cursor: pointer;
  color: #fd0000;
}
.LayTit {
  text-align: center;
  font-size: 20px;
  color: #ff8b00;
  line-height: 180%;
  font-weight: normal;
}
.pageCon{ padding: 15px 0; text-align: center;}
.pageCon .el-pager li{ border-radius: 2px;}
.pageCon .el-pager li.active{ background: #ff9833; color: #fff;}
.pageCon .el-pager li:hover{ color: #ff9833;}
.pageCon .el-pager li.active:hover{ color: #fff;}
.pageCon .el-pagination button:hover{ color: #ff9833;}
@media screen and (max-width: 460px){
  .single-step,#menceng{display: none}
}
@media screen and (min-width: 769px){
  .myDeploy .pageOll .page1 .el-col.el-col-16{width: calc(100% - 325px);width: -webkit-calc(100% - 325px);}
  .myDeploy .pageOll .page1 .el-col.el-col-8{width: 325px;}

}
</style>
